import Taro, { Config } from '@tarojs/taro'
import { Button, Form, Input, View } from '@tarojs/components'
import FyComponent from '@/components/common/countdown'
import './index.scss'
import { sendRegMsg, msgReg } from '@/api/sms'
import { AUTH_TOKEN, SOURCE_ID, USER_INFO } from "@/config/storage"
import {setUserTokenStorage} from "@/utils/storage";

export default class Index extends FyComponent {
  state: any
  telephone: string

  config: Config = {
    navigationBarTitleText: '用户授权'
  }

  constructor(props) {
    super(props)
    this.state = {
      seconds: undefined
    }
    this.telephone = ''
  }

  //  手机号输入监听
  onInput({ detail: { value } }) {
    this.telephone = value
  }

  //  发送验证码
  onSendCode() {
    if (this.seconds > 0) {
      return;
    }

    if (!this.telephone) {
      Taro.showToast({ title: '请输入手机号', icon: 'none' })
      return
    }

    this.setTimer(120)
    Taro.showLoading({ title: '请稍后', mask: true })
    sendRegMsg(this.telephone).then(() => {
      Taro.showToast({ icon: 'none', title: '发送成功' })
    })
  }

  //  倒计时回调
  onCallBack(seconds) {
    this.setState({
      seconds: this.formatNum(seconds)
    })
  }

  //  提交表单
  onSubmit({ detail: { value } }) {
    const sourceId = Taro.getStorageSync(SOURCE_ID)
    if (sourceId) {
      value.sourceId = sourceId
    }

    if (!value.telephone) {
      Taro.showToast({ title: '请输入手机号', icon: 'none' })
      return
    }

    if (!value.code) {
      Taro.showToast({ title: '请输入验证码', icon: 'none' })
      return
    }
    const openId = Taro.getStorageSync('OPEN_ID')

    Taro.showLoading({ title: '请稍后', mask: true })
    msgReg({...value, openId}).then(({ data }) => {
      setUserTokenStorage(data.token)
      Taro.removeStorageSync(SOURCE_ID)
      Taro.setStorageSync(AUTH_TOKEN, data.token)
      Taro.setStorageSync(USER_INFO, data.userInfo)

      Taro.hideLoading()
      Taro.showToast({ icon: 'none', title: '登录成功', duration: 2000 })

      Taro.navigateBack()
    })
  }

  render() {
    const { seconds } = this.state

    return (<View className='login-page xf-page d-f f-g-5'>
      <Form className='login-form' onSubmit={this.onSubmit.bind(this)}>
        <View className='form-item'>
          <Input name='telephone' type='number' maxLength={11} className='form-input' placeholder='请输入手机号' onInput={this.onInput.bind(this)}/>
          {/*<Input name='telephone' value='17365538643' type='number' maxLength={11} className='form-input' placeholder='请输入手机号' onInput={this.onInput.bind(this)}/>*/}
        </View>
        <View className='form-item'>
          <Input name='code' type='number' maxLength={6} className='form-input' placeholder='动态密码'/>
          <View className='form-code' onClick={this.onSendCode.bind(this)}>{seconds > 0 ? `${seconds}秒后重新获取` : '获取动态密码'}</View>
        </View>
        <Button className='form-bnt xf-btn xf-btn-round xf-btn-primary' formType="submit" >登录</Button>
      </Form>
    </View>)
  }
}
